<template>
  <section class="list-demo row">
      <div class="col-xs-12">
          <form class="form-inline col-xs-5">
            <div class="form-group form-group-sm">
              <label class="control-label">下单时间</label>
              <select>
                <option v-for="(item,index) in ['一','三','六']" :key="index">近{{item}}个月订单</option>
              </select>
            </div>
            <div class="form-group form-group-sm padding-l-10">
              <label class="control-label">智能搜索</label>
                <input type="text" class="form-control" placeholder="请输入关键字搜索..."/>
            </div>
            <div class="form-group form-group-sm padding-l-10">
              <div class="text-left">
                <button class="btn btn-primary btn-xs" type="button">搜索</button>
              </div>
            </div>
          </form>
      </div>
      <div class="col-xs-12">
        <table style="margin:10px 0;width:130px;float:left;" class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>姓名</th>
              <th>性别</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="i in 30" :key="i">
              <td>Meric</td>
              <td>男</td>
            </tr>
          </tbody>
        </table>
        <table style="margin:10px 0;width:calc(100% - 130px);overflow:auto;" class="table table-bordered table-hover table-striped">
          <thead>
            <tr>
              <th>姓名</th>
              <th>性别</th>
              <th>地址</th>
              <th width="90px">电话</th>
              <th width="60px">
                <select ref="select" style="border:none;background:#fff;" class="input-xs">
                  <option>全部</option>
                  <option>可用</option>
                  <option>不可用</option>
                </select>
              </th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="i in 30" :key="i">
              <td>Meric</td>
              <td>男</td>
              <td>民族大道北1201号</td>
              <td>1366666666</td>
              <td>可用</td>
              <td>
                <a class="btn btn-default" href="#" role="button">Link</a>
                <button class="btn btn-default" type="submit">Button</button>
                <input class="btn btn-default" type="button" value="Input">
                <input class="btn btn-default" type="submit" value="Submit">
              </td>
            </tr>
          </tbody>
        </table>
        <MPagination
          :page-index="currentPage" 
          :total="count" 
          :page-size="pageSize" 
          @change="pageChange"
        ></MPagination>
      </div>
  </section>
</template>

<script>
import MPagination from '@/components/Pagination'
export default {
  data(){
    return {
      currentPage:2,
      count:200,
      pageSize:12,
    }
  },
  components: {
    MPagination
  },
  methods:{
    pageChange(page){
      console.log(page)
      console.log(this.$children)
    },
  }
};
</script>

<style>
.list-demo {
  padding-bottom: 20px;
}
</style>
